<style lang="less" scoped>
    .tab{
        /*width: 100%;*/
        height: 3.4rem;
        overflow: hidden;
        /*position: relative;*/
    }
    .tabContent{
        height: 100%;
    }
        .menuTab {
            float: left;
            position: absolute;
            margin-right: 0.7rem;
            text-align: center;
            &:last-of-type {
                margin: 0;
            }
            img {
                width: .8rem;
                height: .8rem;
            }
            span {
                display:block;
                color: #202020;
                font-size: 0.24rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                &:last-of-type {
                    color: #202020;
                    font-size: 0.24rem;
                    text-align: center;
                }
            }
        }
    .horizontal{
        position: absolute;
        width: 1.6rem;
        height: 2px;
        background-color: #C2C0C0;
        border-radius: 3px;
        left: 0;
        right: 0;
        bottom: .1rem;
        margin: auto;
        overflow: hidden;
    }
    .indicator{
        width: 50%;
        height: 100%;
        border-radius: 3px;
        background-color: #FF0000;
        transition: transform 50ms;
    }
</style>
<style>
    /*.tab .bscroll-horizontal-scrollbar{        滚动条样式
        !*width: 2rem;*!
        !*margin: auto;*!
        background-color: #C2C0C0;
        border-radius: 3px;
        height: 2px !important;
        left: 40% !important;
        right: 40% !important;
    }
    .tab .bscroll-indicator{
        !*width: 50% !important;*!
        border: none !important;
        background-color: #FF0000 !important;
    }*/
</style>
<template>
    <div class="tab" ref="homeMenu">
        <div class="tabContent" ref="tabcontent">
            <div class="menuTab" v-for="(v,i) in homeMenuArr" :ref="'menuTab_' + i" @click="gotoPage(v)">
                <span :class="v.doubleEleven_icon"></span>
                <!--<img v-lazy="{src: v.icon}" alt="">-->
                <span>{{v.title}}</span>
            </div>
        </div>
        <div class="horizontal" ref="horizontal">
            <div class="indicator" ref="indicator"></div>
        </div>
    </div>
</template>
<script>
    import {mapState,mapActions} from 'vuex'
    import homeMenuArr from '@/home/components/homeMenu'
    import {USER_SIGNIN} from 'store/user'
    export default {
      name: 'homeMenu',
      created(){
      },
      mounted(){
        this.$nextTick(() => {
          this.InitTabScroll();
        })
      },
      activated(){

      },
      data(){
        return(
          {
            homeMenuArr: homeMenuArr
          }
        )
      },
      updated(){
        this.InitTabScroll();
      },
      methods:{
        ...mapActions([USER_SIGNIN]),
        gotoPage(data){
          if(data.url){
            if(data.title == '飞机票' || data.title == '火车票' || data.title == '信用卡' || data.title == '火车票'){
              this.Interactive.intoActivityWebView(data.title,data.url)
            }else if(data.url == '/my/shop'){
              if(this.comJS.getCookie('t')){
                this.$ajax.inFo.queryIdentityInfo()
                  .then(res => {
                    this.USER_SIGNIN(res.body.content)
                    if(res.body.content.authentication != "1"){
                      this.$router.push('/my/verified')
                    }else{
                      this.$router.push({path:data.url.indexOf('/#/') >= 0 ? data.url.split('#')[1] : data.url})
                    }
                  })
              }else{
                this.Interactive.pushTokentoJS();
              }
            }else{
              this.$router.push({path:data.url.indexOf('/#/') >= 0 ? data.url.split('#')[1] : data.url})
            }
          }
        },
        InitTabScroll(){
          let width=  this.homeMenuArr.length%2 ? (Math.floor(this.homeMenuArr.length/2) + 1) * this.$refs.homeMenu.offsetWidth/ 750 * 150 : this.homeMenuArr.length/2 * this.$refs.homeMenu.offsetWidth/ 750 * 150;
          this.homeMenuArr.forEach((v,i)=>{
            if(i % 2){
              this.$refs['menuTab_'+i][0].style.bottom = this.$refs.homeMenu.offsetWidth/ 750*24 + 'px'
              this.$refs['menuTab_'+i][0].style.left = 150 * Math.floor(i/2) *  this.$refs.homeMenu.offsetWidth/ 750 + (10*  this.$refs.homeMenu.offsetWidth/ 750) + 'px'
            }else{
              this.$refs['menuTab_'+i][0].style.top = 0
              this.$refs['menuTab_'+i][0].style.left = 150 * Math.floor(i/2) *  this.$refs.homeMenu.offsetWidth/ 750  + (10*  this.$refs.homeMenu.offsetWidth/ 750) + 'px'
            }
          })
          this.$refs.tabcontent.style.width= width * 100 * 750 < this.$refs.homeMenu.offsetWidth ? this.$refs.homeMenu.offsetWidth + 'px' : width +'px';
          this.$refs.indicator.style.width= this.$refs.homeMenu.offsetWidth/this.$refs.tabcontent.offsetWidth *  this.$refs.horizontal.offsetWidth +'px';
          this.$nextTick(()=>{
            if (!this.scroll) {
              this.scroll=new BScroll(this.$refs.homeMenu, {
                startX:0,
                click:false,
                scrollX:true,
                scrollY:true,
                // stopPropagation:true,
                eventPassthrough:'vertical',
                /*scrollbar:{  滚动条
                  fade:false,
                },*/
                probeType:2,
              })
            }else{
              this.scroll.refresh();
            }
            this.scroll.on('scroll', (pos) => {
              let x =  pos.x / this.$refs.tabcontent.offsetWidth
              let sx = this.$refs.horizontal.offsetWidth * x
              if(sx >= 0){
                sx = 0
              }
              if(-sx  + this.$refs.indicator.offsetWidth > this.$refs.horizontal.offsetWidth){
                sx = this.$refs.indicator.offsetWidth - this.$refs.horizontal.offsetWidth
              }
              this.$refs.indicator.style.transform = 'translateX('+ -sx +'px)'
            })
            this.scroll.on('scrollEnd', (pos) => {
              let x =  pos.x / this.$refs.tabcontent.offsetWidth
              let sx = this.$refs.horizontal.offsetWidth * x
              if(sx >= 0){
                sx = 0
              }
              if(-sx  + this.$refs.indicator.offsetWidth > this.$refs.horizontal.offsetWidth){
                sx = this.$refs.indicator.offsetWidth - this.$refs.horizontal.offsetWidth
              }
              this.$refs.indicator.style.transform = 'translateX('+ -sx +'px)'
            })
          });
        }
      },
    }
</script>